<template>
	<view class="content">
		<view class="bgBox">
			<view class="centerBox" @click="route('/pages/mine/setting')">
				<uv-row customStyle="margin-bottom: 10px" v-if="info.is_up=='1'">
					<uv-col span="2.5">
						<view class="userLogo" style="position:relative;">
							<image class="logo" :src="imgUrl(info.avatar)" v-if="info.avatar"
								style="width: 120rpx; height: 120rpx;border-radius:50%;">
							</image>
							<image class="logo" src="@/static/img/logo.png" v-else
								style="width: 120rpx; height: 120rpx;border-radius:50%;">
							</image>
							<image src="@/static/img/icon07.png"
								style="width: 30rpx; height: 30rpx;position:absolute;bottom:8%;left:60%"
								v-if="info.sex=='1'">
							</image>
							<image src="@/static/img/icon08.png"
								style="width: 30rpx; height: 30rpx;position:absolute;bottom:8%;left:60%"
								v-if="info.sex=='2'">
							</image>
						</view>
					</uv-col>
					<uv-col span="9.5">
						<view class="txtName">{{info.name}}<text class="text01">{{info.account}}</text></view>
					</uv-col>
				</uv-row>
				<uv-row customStyle="margin-bottom: 10px" v-if="info.is_up=='0'">
					<uv-col span="9.5">
						<view class="txtName" style="font-size:28rpx;color:#000;font-weight:500;">请维护个人信息</view>
					</uv-col>
				</uv-row>
			</view>
			<view class="signBox" @click="route('/pages/mine/calendar')">
				<view>
					<view class="text02">签到日历 </view>
					<view class="text03">关注上课时间，签到换积分</view>
				</view>
				<view class="signBtn">签到日历
					<image src="@/static/img/icon09.png"
						style="width: 24rpx; height: 24rpx; margin-left: 15rpx; vertical-align: middle;"></image>
				</view>
			</view>
		</view>

		<view class="bgWrite">
			<view class="orderBox">
				<view class="title01">我的订单</view>
				<view class="text04" @click="route('/pages/mine/orderList')">
					<view style="display:flex;margin-right:30rpx;">
						<text style="color:#9CA0AF;margin-right:20rpx;">全部订单</text>
						<uv-icon label-pos="left" name="arrow-right" color="rgba(156, 160, 175, 1)" size="11"></uv-icon>
					</view>
				</view>
			</view>
			<view class="menuLinkUl">
				<view class="li" @click="route('/pages/mine/orderList',{index:0})">
					<image src="@/static/img/img07.png" style="width: 44rpx; height: 44rpx; margin-bottom: 15rpx;">
					</image>
					<text class="grid-text">全部</text>
				</view>
				<view class="li" @click="route('/pages/mine/orderList',{index:1})">
					<image src="@/static/img/img08.png" style="width: 44rpx; height: 44rpx; margin-bottom: 15rpx;">
					</image>
					<text class="grid-text">待付款</text>
				</view>
				<view class="li" @click="route('/pages/mine/orderList',{index:2})">
					<image src="@/static/img/img09.png" style="width: 44rpx; height: 44rpx; margin-bottom: 15rpx;">
					</image>
					<text class="grid-text">已支付</text>
				</view>
				<view class="li" @click="route('/pages/mine/orderList',{index:3})">
					<image src="@/static/img/img10.png" style="width: 44rpx; height: 44rpx; margin-bottom: 15rpx;">
					</image>
					<text class="grid-text">已完成</text>
				</view>
				<view class="li" @click="route('/pages/mine/orderList',{index:4})">
					<image src="@/static/img/img11.png" style="width: 44rpx; height: 44rpx; margin-bottom: 15rpx;">
					</image>
					<text class="grid-text">已退款</text>
				</view>
			</view>
		</view>
		<view class="bgWrite">
			<view class="title01">常用功能</view>
			<view class="useLink">
				<view class="gui-list-items" @click="route('/pages/mine/contact')">
					<view style="display:flex;">
						<image src="@/static/img/ge.png" class="tuImg">
						</image>
						<text class="names">加入社群</text>
						<text class="jia">欢迎您的加入</text>
					</view>
					<view class="gui-list-body " style="display:flex;">
						<uv-icon slot="icon" size="15" name="arrow-right" color="rgba(156, 160, 175, 1)"></uv-icon>
					</view>
				</view>
				<view class="gui-list-items" @click="route('/pages/mine/collect')">
					<view style="display:flex;">
						<image src="@/static/img/cang.png" class="tuImg">
						</image>
						<text class="names">课程收藏</text>
						<text class="jia">您收藏的课程都在这里</text>
					</view>
					<view class="gui-list-body " style="display:flex;">
						<uv-icon slot="icon" size="15" name="arrow-right" color="rgba(156, 160, 175, 1)"></uv-icon>
					</view>
				</view>
				<view class="gui-list-items" @click="route('/pages/mine/feedback')">
					<view style="display:flex;">
						<image src="@/static/img/fan.png" class="tuImg">
						</image>
						<text class="names">问题反馈</text>
						<text class="jia">及时反馈所遇到的问题哦~</text>
					</view>
					<view class="gui-list-body " style="display:flex;">
						<uv-icon slot="icon" size="15" name="arrow-right" color="rgba(156, 160, 175, 1)"></uv-icon>
					</view>
				</view>
				<view class="gui-list-items" @click="go_out">
					<view style="display:flex;">
						<image src="@/static/img/tui.png" class="tuImg">
						</image>
						<text class="names">退出登录</text>
					</view>
					<view class="gui-list-body " style="display:flex;">
						<uv-icon slot="icon" size="15" name="arrow-right" color="rgba(156, 160, 175, 1)"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<DragButton>
			<uv-button open-type="contact" :customStyle="{borderRadius:'99rpx 0 0 99rpx '}" color="#31c0ed">
				<image class="logo" src="@/static/img/icon10.png"
					style="width: 60rpx; height: 60rpx; margin-right: 10rpx; vertical-align: middle;">
				</image><text style="font-size:26rpx;">课程顾问</text>
			</uv-button>
		</DragButton>
		<!-- 
		</view> -->
		<!-- 
		 -->
	</view>
</template>

<script setup lang="ts">
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { onPullDownRefresh } from '@dcloudio/uni-app'
	import DragButton from '@/components/dragon-dragButton/index.vue'
	import { ref } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	import { userStorage } from '@/hooks/useStorage';
	onShow(() => {
		get_info()
	});
	onPullDownRefresh(() => {
		get_info()
		uni.stopPullDownRefresh() //停止刷新
	});
	const info = ref({})
	//获取个人的信息
	const get_info = async () => {
		info.value = (await http.get('/api/v1/user/info')).data;//获取左侧菜单
	};
	const loading = ref(false);
	//退出登录
	const { removeStorage } = userStorage();
	const go_out = () => {
		loading.value = true;
		uni.showModal({
			title: '提示',
			content: '您确定要退出登录吗？',
			confirmText: '确认',
			confirmColor: '#333',
			cancelText: '取消',
			cancelColor: '#999',
			success: (res) => {
				if (res.confirm) {
					toast('正在退出中...');
					loading.value = true;
					removeStorage('token');
					setTimeout(() => {
						toast('退出成功');
					}, 1000);
					setTimeout(() => {
						route('/pages/login/login');
						loading.value = false;
					}, 2500);
				} else if (res.cancel) {
					loading.value = false;
				}
			}
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(0deg, #f8f9fb 0%, #e4f0fc 100%);
		// height: 100%;
	}

	.gui-list-items {
		display: flex;
		justify-content: space-between;
		margin: 48rpx 0;
	}

	.names {
		margin: 0 10px;
		font-weight: 400;
		font-size: 30rpx;
		color: #313131;
	}

	.tuImg {
		margin: 8rpx 10rpx 8rpx 20rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.jia {
		font-weight: normal;
		font-size: 26rpx;
		color: #AFAFAF;
		padding-left: 10rpx;
		margin-top: 2rpx;
	}

	.hTtl {
		text-align: center;
		padding: 60rpx;
		font-size: 32rpx;
		/* font-weight: 700; */
		line-height: 21px;
		color: rgba(0, 0, 0, 1);
	}

	.centerBox {
		padding: 20rpx 30rpx;
	}

	.centerBox .text01 {
		display: block;
		font-weight: 400;
		font-size: 26rpx;
		color: #949494;
		margin-top: 8rpx;
	}

	.centerBox .txtName {
		font-size: 28rpx;
		color: #313131;
		padding-left: 15rpx;
	}

	.signBox {
		margin: 0 30rpx 50rpx;
		background: rgba(49, 192, 237, 1);
		padding: 30rpx 50rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text02 {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
		line-height: 50rpx;
	}

	.text03 {
		line-height: 50rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 1);
	}

	.text04 {
		color: rgba(156, 160, 175, 1);
		font-size: 26rpx;
	}

	.bgWrite {
		margin: 0 30rpx 30rpx;
		background: #fff;
		padding: 30rpx 10rpx;
		border-radius: 15rpx;
	}


	.title01 {
		padding: 0 35rpx;
		font-size: 32rpx;
		line-height: 21px;
		color: rgba(16, 2, 25, 1);
	}

	.signBtn {
		font-size: 26rpx;
		border-radius: 99px;
		background: rgba(255, 255, 255, 1);
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.orderBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 50rpx;
	}

	.menuLinkUl {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.menuLinkUl .li {
		text-align: center;
		width: 20%;
	}

	.menuLinkUl .li text {
		text-align: center;
		display: block;
		font-size: 26rpx;
	}

	.useLink {
		padding: 15rpx 30rpx 20rpx;
	}

	.serviceFloat {
		font-size: 26rpx;
		position: fixed;
		right: -20px;
		bottom: 10%;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		color: #fff;
		opacity: 1;
		padding: 0 10px;
	}
</style>